<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setCharacterEncoding("UTF-8") ;
%>
<jsp:include page="../common/header.jsp">
    <jsp:param name="title" value="区域管理页面"/>
</jsp:include>

<div class="container-fluid">
    <div class="row">
        <!-- 左边的导航栏 sidebar-->
        <jsp:include page="../common/sidebar.jsp">
            <jsp:param name="menuId" value="#equipmentMenu"/>
            <jsp:param name="subMenuId" value="#areaSubMenu"/>
        </jsp:include>
    </div>

    <!-- 右边的主体部分 -->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <h2>区域管理</h2>
        <!--写一个table bootstrap-table-->
        <!-- toolbar  -->
        <div class="panel panel-primary">
            <div class="panel-body">
                <div id="toolbar" >
                    <form class="form-inline" style="width:100%; margin-bottom: 20px;">
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="新增区域" id="addBtn" data-toggle="modal" data-target="#addAreaModal" class="btn btn-primary" >
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="删除区域" id="deleteBtn" class="btn btn-info" onclick="deleteArea()">
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="修改区域" id="editBtn" class="btn btn-danger" onclick="editArea()">
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <label for="queryName"></label>
                            <input type="text" id="queryName" class="form-control">
                            <input type="button" class="btn btn-success" id="queryBtn"  value="查询" onclick="queryArea()">
                        </div>
                    </form>

                </div>
                <div class="container" style="width:100%;margin-top: 20px;">
                    <!--放一个table元素-->
                    <table id="table"></table>
                </div>
            </div>
        </div>

        <!-- 新增区域模态窗体 -->
        <div class="modal fade" id="addAreaModal" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="resetForm()"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">区域信息</h4>
                    </div>
                    <div class="modal-body">

                        <form id="addAreaForm" class="form-horizontal" action="area/add"  method="post">
                            <input type="hidden" name ="id" id="areaId">
                            <div class="form-group">
                                <label for="building" class="col-sm-2 control-label">楼栋名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="building" id="building" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="floor" class="col-sm-2 control-label">楼层：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="floor" id="floor" class="form-control">
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetForm()">取消</button>
                        <button type="button" class="btn btn-primary" onclick="addArea()">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<jsp:include page="../common/footer.jsp"></jsp:include>

<%--<script>--%>
<%--    // 处理菜单的高亮显示问题--%>
<%--    // 当页面加载完成后，立刻执行一个在匿名函数--%>
<%--    $(document).ready(function () {--%>
<%--        $('a.nav-link').removeClass("active")--%>
<%--        $('a.dropdown-item').removeClass("active")--%>

<%--        $('#equipmentMenu').addClass("active")--%>
<%--        $('#areaSubMenu').addClass("active")--%>
<%--    });--%>
<%--</script>--%>
<script>
    // $('#table').bootstrapTable({
    //     url: 'data1.json',
    //     pagination: true,
    //     pageNumber:1,                       //初始化加载第一页，默认第一页
    //     pageSize: 5,                       //每页的记录行数（*）
    //     pageList: [5, 10, 25],        //可供选择的每页的行数（*）
    //     columns: [{
    //         field:"state",
    //         checkbox:"true"
    //         },{
    //         field: 'id',
    //         title: 'ID'
    //     }, {
    //         field: 'building',
    //         title: '楼栋'
    //     }, {
    //         field: 'floor',
    //         title: '楼层'
    //     }]
    // });
    $('#table').bootstrapTable({
        contentType : "application/x-www-form-urlencoded",
        url: '${pageContext.request.contextPath}/api/servlet/area/queryList',
        queryParams:queryParam,
        method:"POST",
        dataType:"json",
        pagination: true,
        sidePagination: "server", //server表示服务端分页，client客户端分页
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 5,                       //每页的记录行数（*）
        pageList: [5, 10, 25],        //可供选择的每页的行数（*）
        uniqueId: "id",
        striped: true,
        singleSelect:true,
        clickToSelect:true,
        showRefresh:true,
        showToggle:true,
        toolbar:"#toolbar",
        columns: [{
            field:"state",
            checkbox:"true"
        },{
            field: 'id',
            title: 'ID'
        }, {
            field: 'building',
            title: '楼栋',
            sortable : true
        }, {
            field: 'floor',
            title: '楼层'
        }, {
            field: 'floor',
            title: '楼层'
        }, {
            field: 'floor',
            title: '楼层'
        }]
    });

    function queryParam(params){
        console.info(params);
        // this 表示当前的bootStrap-table 的实例
        console.log(this);
        var param = {
            queryName:$("#queryName").val(),
            limit : params.limit, // 数据集合大小
            offset : params.offset, // 页码
            pageIndex : this.pageNumber,
            pageSize : this.pageSize
        };
        console.info(param);
        return param;

    }

    // 查询按钮操作
    function queryArea(){
        $('#table').bootstrapTable('refresh');
    }

    // 新增区域信息
    function addArea(){
        // 如何获取input框中的输入值呢？
        var areaId = $('#areaId').val()
        var building = $('#building').val()
        var floor = $('#floor').val()

        // jquery 提供了方面的获取表单输入的值的方式
        var params = $('#addAreaForm').serializeArray();
        console.log(params);

        // 根据id是否为空，判断当前的请求是新增，还是修改
        var url = ''
        if(areaId === ''){//新增操作
            url = "${pageContext.request.contextPath}/api/servlet/area/add"//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
        }else{
            url = "${pageContext.request.contextPath}/api/servlet/area/update"//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
        }

        $.ajax({
            url: url,
            // data:{"building":building,"floor":floor},
            data:params,
            method:"post",
            dataType:"json",
            success: function(result){
                if(result.status="success"){
                    showSuccess(result.message)
                    // 隐藏模态框
                    $('#addAreaModal').modal('hide');
                    // 对模态框中的form表单的值，进行初始化操作，也即清空input表单value值
                    resetForm()

                }else{
                    alert(result.message)
                }

            },
            timeout:1000,
            error: function(error){
                alert("服务器请求失败!【"+error +"】")
            }
        });
        $('#table').bootstrapTable('refresh')
    }

    function resetForm(){
        $('#addAreaForm').find('input[type=text],input[type=hidden]').each(function(){
            // 对每一个input标签的值设置为空
            $(this).val('')
        })
    }

    function editArea(){
        // 返回当前被选中的行的集合
        var rows = $('#table').bootstrapTable('getSelections')

        if(rows.length==0){//没有选中任何行
            alert("没有选中任何数据行，请选择")
            return;
        }
        var currentRow = rows[0]

        //给模态框中的input标签赋值
        $('#areaId').val(currentRow.id)
        $('#building').val(currentRow.building)
        $('#floor').val(currentRow.floor)

        // 显示模态框
        $('#addAreaModal').modal('show');

    }

    function deleteArea(){
        // 返回当前被选中的行的集合
        var rows = $('#table').bootstrapTable('getSelections')

        if(rows.length==0){//没有选中任何行
            alert("没有选中任何数据行，请选择")
            return;
        }

        var answer = window.confirm("确定要删除该行记录吗?");
        console.log(answer)
        if(!answer){
            //刷新页面
            $('#table').bootstrapTable('refresh')
            return;
        }
        var currentRow = rows[0]
        // 通过ajax调用后台的服务
        $.ajax({
            url:"${pageContext.request.contextPath}/api/servlet/area/delete",//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
            method:"post",
            data:{"id":currentRow.id},
            dataType:"json",
            success: function(result){
                if(result.status ==="success"){
                    showSuccess(result.message);
                    //刷新页面
                    $('#table').bootstrapTable('refresh')
                }
            },
            timeout:1000,
            error: function(error){
                alert(error)
            }
        })
    }
</script>
</body>
</html>